<template>
    <div class="wrapper">
        <swiper :options="swiperOption" v-if="showSwiper">
            <!-- slides -->
            <swiper-slide v-for="(item, index) of swiperList" :key="index">
                <img class="swiper-img" :src="item.imgUrl" :key="item.id" alt="SlideImg" />
            </swiper-slide>
            <!-- Optional controls -->
            <div class="swiper-pagination" slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    name: 'HomeSwiper',
    props: {
        swiperList: Array,
    },
    data() {
        return {
            swiperOption: {
                pagination: '.swiper-pagination', // 传入轮播图上面的小白点
                loop: true, // 使轮播图循环，到最后一张的时候下一站就是第一张
            },
            // swiperList在实际开发中是有后端传到前端来的
            // swiperList: [{
            //     id: '0001',
            //     imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/e9f92741ef8b1cb0472ced96150d0d1c.jpg_750x200_1f0a2392.jpg'
            // },{
            //     id: '0002',
            //     imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20194/2680ea76118c1fc8f5d44b4240c20275.jpg_750x200_42900395.jpg'
            // },{
            //     id: '0003',
            //     imgUrl: 'http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20193/26c9b54e3e02d3724f614883d77a62c6.jpg_750x200_57aa8efa.jpg'
            // }]
        };
    },
    computed: {
        showSwiper() {
            return this.swiperList.length;
        },
    },
};
</script>
<style lang="stylus" scoped>
// 这个>>>的意思是：对样式进行穿透wrapper下面的子组件都会用到这个
    .wrapper >>> .swiper-pagination-bullet-active
        background #fff !important;
    .wrapper
        overflow hidden;
        width 100%;
        height 0;
        padding-bottom 32%;
        .swiper-img
            width 100%;
</style>
